<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">工序分配 - {$row.plan_name}</h3>
    </div>
    <div class="panel-body">
        <!-- 隐藏字段用于JS获取数据 -->
        <input type="hidden" id="plan-id" value="{$row.id}">
        <input type="hidden" id="total-quantity" value="{$row.total_quantity}">
        
        <!-- 隐藏的工人列表用于JS获取 -->
        <select id="hidden-user-list" style="display: none;">
            {foreach $userList as $id => $name}
            <option value="{$id}">{$name}</option>
            {/foreach}
        </select>
        
        <!-- 计划信息 -->
        <div class="row">
            <div class="col-md-12">
                <div class="alert alert-info">
                    <div class="row">
                        <div class="col-md-4">
                            <strong>产品：</strong>{$row.product_name} - {$row.product_model}
                        </div>
                        <div class="col-md-4">
                            <strong>计划数量：</strong><span class="text-primary">{$row.total_quantity}</span>
                        </div>
                        <div class="col-md-4">
                            <strong>说明：</strong>每个工序都需要分配完整的计划数量
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 工序分配列表 -->
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">工序分配管理</h4>
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>工序名称</th>
                                        <th>计划数量</th>
                                        <th>已分配</th>
                                        <th>剩余数量</th>
                                        <th>分配进度</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {foreach $processListWithAllocation as $process}
                                    <tr data-process-id="{$process.id}">
                                        <td>
                                            <strong>{$process.name}</strong>
                                        </td>
                                        <td>
                                            <span class="text-primary">{$process.total_quantity}</span>
                                        </td>
                                        <td>
                                            <span class="text-success">{$process.allocated_quantity}</span>
                                        </td>
                                        <td>
                                            <span class="text-danger">{$process.remaining_quantity}</span>
                                        </td>
                                        <td>
                                            {if $process.total_quantity > 0}
                                                {php}
                                                    $progress = round(($process['allocated_quantity'] / $process['total_quantity']) * 100, 1);
                                                {/php}
                                                <div class="progress" style="margin-bottom: 0;">
                                                    <div class="progress-bar {if $progress == 100}progress-bar-success{elseif $progress > 0}progress-bar-warning{else}progress-bar-danger{/if}" 
                                                         style="width: {$progress}%">
                                                        {$progress}%
                                                    </div>
                                                </div>
                                            {else}
                                                <span class="text-muted">0%</span>
                                            {/if}
                                        </td>
                                        <td>
                                            {if $process.remaining_quantity > 0}
                                                <button type="button" class="btn btn-primary btn-sm allocate-process" 
                                                        data-process-id="{$process.id}" 
                                                        data-process-name="{$process.name}"
                                                        data-remaining-quantity="{$process.remaining_quantity}">
                                                    <i class="fa fa-plus"></i> 分配
                                                </button>
                                            {else}
                                                <span class="label label-success">已完成</span>
                                            {/if}
                                        </td>
                                    </tr>
                                    {/foreach}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 分配表单 -->
        <div class="row" id="allocation-form" style="display: none;">
            <div class="col-md-12">
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <h4 class="panel-title">分配详情 - <span id="current-process-name"></span></h4>
                    </div>
                    <div class="panel-body">
                        <form id="allocation-form-content">
                            <!-- 动态生成的分配表单 -->
                        </form>
                        <div class="text-center" style="margin-top: 20px;">
                            <button type="button" class="btn btn-success btn-lg" id="save-allocations">
                                <i class="fa fa-save"></i> 保存分配
                            </button>
                            <button type="button" class="btn btn-default btn-lg" id="cancel-allocation" style="margin-left: 10px;">
                                <i class="fa fa-times"></i> 取消
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>